<template>
	<view class="content">
		<view class="type-serch">
			<view class="serch-key" @click="goSearch">请输入关键字</view>
		</view>
		<view class="type-con">
			<view class="type-left">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="item-middle" v-for="(item,index) in 20" :key="index"
						:class="cityIndex === index ?'cityActive':''" @click="switchCity(index,item)">
						<view style="position: relative;">
							<text>电视{{index}}</text>
							<u-badge absolute :offset='[-8, -10]' bgColor="#FF3902" numberType="overflow" type="warning"
								max="99" value="8"></u-badge>
						</view>

						<!-- <view style="margin-left: 31rpx;">{{item.name}}</view>
                		<view class="item-tag" v-if="item.tag>0">{{item.tag}}</view> -->
					</view>
				</scroll-view>
			</view>
			<view class="type-right">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="right-con">
						<view class="item-right" v-for="(item,index) in 40" :key="index"
							:class="rightIndex === index ?'rightActive':''" @click="switchRight(index,item)">
							液晶电视-挂装{{index}}
						</view>
					</view>

				</scroll-view>
			</view>
		</view>
		<view class="detail-but">
			<view class="but-con">
				<view class="but-item" style="width: 250rpx;">
					<u-button type="success" shape="circle" text="重置"></u-button>
				</view>
				<view class="but-item" style="width: 415rpx;">
					<u-button type="primary" shape="circle" text="保存设置"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityIndex: 0,
				rightIndex: 0,
			}
		},
		methods: {
			switchCity(index, item) {
				this.cityIndex = index
			},
			switchRight(index, item) {
				this.rightIndex = index
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/user/typeSearch/typeSearch'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;

	}

	.type-serch {
		width: 100vw;
		height: 123rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.serch-key {
		width: 688rpx;
		height: 77rpx;
		background: #F7F7F7;
		border-radius: 38rpx;
		padding-left: 23rpx;
		font-size: 27rpx;
		color: #999999;
		line-height: 77rpx;
	}

	.but-con {
		width: 688rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.type-con {
		height: calc(100vh - 123rpx - 117rpx - env(safe-area-inset-bottom) / 2);
		width: 100vw;
		background-color: red;
		display: flex;
	}

	.type-left {
		height: calc(100vh - 123rpx - 117rpx - env(safe-area-inset-bottom) / 2);
		width: 185rpx;
		background-color: #F7F7F7;
	}

	.item-middle {
		width: 185rpx;
		height: 85rpx;
		font-size: 27rpx;
		color: #666666;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cityActive {
		background: #FFFFFF;
		color: #000000;
	}

	.type-right {
		height: calc(100vh - 123rpx - 117rpx - env(safe-area-inset-bottom) / 2);
		flex: 1;
		background-color: #FFFFFF;
	}

	.right-con {
		display: flex;
		width: 100%;
		align-items: center;
		flex-wrap: wrap;
		padding: 23rpx 0;
	}

	.item-right {
		width: 237rpx;
		height: 80rpx;
		background: #F7F7F7;
		border: 1px solid #F7F7F7;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-left: 31rpx;
		margin-bottom: 23rpx;
		font-size: 27rpx;
		color: #666666;
	}

	.rightActive {
		color: #0277DE;
		background: #FFFFFF;

		border: 1px solid #0277DE;
	}
</style>